@import './vars';
@import './functions';


@mixin flex($direction: row) {
  display: flex;
  flex-direction: $direction;
}

@mixin fullScreen($pos: absolute) {
  position: $pos;
  inset: 0;
}

@mixin square($size) {
  width: rem($size);
  height: rem($size);
}

@mixin maxLines($n: 1) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $n;
  overflow: hidden;
  word-break: break-word;
}

@mixin centerByPosition($isHorizontal: true,
  $isVertical: true,
  $position: absolute) {
  position: $position;

  $offsetX: 0;
  $offsetY: 0;

  @if $isHorizontal {
    $offsetX: -50%;

    left: 50%;
  }

  @if $isVertical {
    $offsetY: -50%;

    top: 50%;
  }

  transform: translate($offsetX, $offsetY);
}

$dirs: (
  left: l,
  right: r,
  top: t,
  bottom: b,
);

@mixin padding($start: 5, $end: 41, $step: 5) {
  @each $dir, $d in $dirs {
    $n: $start;

    @while $n < $end {
      .p#{$d}#{$n} {
        padding-#{$dir}: $n * 1px;
      }

      $n: $n + $step;
    }
  }
}

$PosVals: (
  fixed: f,
  absolute: a,
  relative: r,
  static: s,
  sticky: t
);

@mixin position() {
  @each $pos, $p in $PosVals {
    .pos-#{$p} {
      position: $pos;
    }
  }
}

@mixin fontWeight($start: 300, $end: 601, $step: 100) {
  $n: $start;

  @while $n < $end {
    .fw#{$n} {
      font-weight: $n;
    }

    $n: $n + $step;
  }
}

@mixin margin($start: 5, $end: 41, $step: 5) {
  @each $dir, $d in $dirs {
    $n: $start;

    @while $n < $end {
      .m#{$d}#{$n} {
        margin-#{$dir}: $n * 1px;
      }

      $n: $n + $step;
    }
  }
}

@mixin marginPercent($start: 5, $end: 41, $step: 5) {
  @each $dir, $d in $dirs {
    $n: $start;

    @while $n < $end {
      .m#{$d}#{$n}p {
        margin-#{$dir}: $n * 1%;
      }

      $n: $n + $step;
    }
  }
}

$disVals : (block: b,
  inline: i,
  inline-block: ib,
  flex: f,
  inline-flex: if,
  grid: g,
  inline-grid: ig,
  none: n);

@mixin display() {
  @each $dis, $d in $disVals {
    .dis-#{$d} {
      display: $dis;
    }
  }
}

$Hdirs: (
  left: l,
  right: r,
  center: c,
);

@mixin textAlign() {
  @each $dir, $d in $Hdirs {
    .ta-#{$d} {
      text-align: $dir;
    }
  }
}

@mixin fontSize() {
  $n: 12;

  @while $n < 31 {
    .fs#{$n} {
      font-size: $n * 1px;

      $n: $n + 2;
    }
  }
}

@mixin color() {
  .gray {
    color: #999;
  }

  .red {
    color: red;
  }

  .theme-color {
    color: $themeColor;
  }
}